<!--
 * @Author: early-autumn
 * @Date: 2020-05-30 16:39:51
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-06 15:18:22
-->
<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <sticky :sticky-top="80">
        <charging-project
          :front-desk="frontDesk"
          @select="handleSelect"
        ></charging-project>
      </sticky>
    </el-col>
    <el-col :span="18">
      <order-edit
        ref="orderEdit"
        :order-id="orderId"
        :patient="patient"
        :appointment="appointment"
        :tc="tc"
        @ok="handleOk"
        @cancel="handleCancel"
      ></order-edit>
    </el-col>
  </el-row>
</template>

<script>
import ChargingProject from './ChargingProject'
import OrderEdit from './OrderEdit'

export default {
  name: 'Billing',
  components: {
    ChargingProject,
    OrderEdit,
    Sticky: () => import('@/components/Sticky'),
  },
  props: {
    frontDesk: {
      type: Boolean,
      default: false,
    },
    orderId: {
      type: Number,
      default: 0,
    },
    patient: {
      type: Object,
      default: () => ({}),
    },
    appointment: {
      type: Object,
      default: () => ({}),
    },
    tc: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleOk() {
      this.$emit('ok')
      this.$emit('tab-change', 'PayOrderRecordPane')
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleSelect(e) {
      this.$refs.orderEdit.addProject(e)
    },
    pushProject(e) {
      this.$refs.orderEdit.pushProject(...e)
    },
  },
}
</script>

<style></style>
